<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<style>
	.js_list li {
		margin-top: 5px;
	}
	.skins_tree {
		background-position: 192px 1px;
		width: 201px;
	}
</style>
 
 <div class="clearfix">
	<div class="js_b">
		<input type="hidden" id="cardId" name="cardId" value="<c:out value="${cardId }"/>"/>
		<span class="js_title">未授权角色</span>
		<ul id="no_limit" class="js_list">
			<c:forEach var="role" items="${roleList }">
				<li id="<c:out value="${role.id }"/>"><c:out value="${role.name }"/></li>
			</c:forEach>
		</ul>
	</div>
	<div class="l js_jt_cnt">
		<ul class="clearfix">
			<li><span class="right" id="add_right"></span></li>
			<li><span class="left" id="add_left"></span></li>
		</ul>
	</div>
	<div class="js_b">
		<span  class="js_title">已授权角色</span>
		<ul id="yes_limit" class="js_list">
			<c:forEach var="role" items="${myRoleList }">
				<li id="<c:out value="${role.id }"/>"><c:out value="${role.name }"/></li>
			</c:forEach>
		</ul>
	</div>
</div>

<script type="text/javascript">
$(".js_list li").hover(
	function () {
		$(this).addClass("hover");
	},
	function () {
		$(this).removeClass("hover");
	}
);

//先通过die()方法解除，再通过live()绑定
$("#no_limit li").die().live("dblclick",function(){
	$(this).appendTo("#yes_limit").removeClass();
});

//先通过die()方法解除，再通过live()绑定
$("#yes_limit li").die().live("dblclick",function(){
	$(this).appendTo("#no_limit").removeClass();
});

$(".js_list li").click(function(){
	$(this).toggleClass("cur");
});
  
$("#add_right").click(function(){
	$("#no_limit").children(".cur").appendTo("#yes_limit").removeClass();
});
  
$("#add_left").click(function(){
	$("#yes_limit").children(".cur").appendTo("#no_limit").removeClass();
});

</script>